﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .ts-display-pf-img
        {
            width: 270px;
        }
        .rollover
        {
            background: url(resources/images/hover-zoom.png);
            background-color: #000;
            background-repeat: no-repeat;
            background-position: center;
            width: 270px;
            height: 150px;
            display: block;
            position: absolute;
            z-index: 10;
            display: none;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script>
    <script type="text/javascript">
        jQuery(document).ready(function () {
            if (jQuery.browser.msie && jQuery.browser.version < 7) return;

            jQuery('.ts-display-pf-img').hover(
			function () {
			    jQuery(this).find('.rollover').stop().fadeTo(500, 0.60);
			},
			function () {
			    jQuery(this).find('.rollover').stop().fadeTo(500, 0);
			}
		)
        });
    </script>
</head>
<body>
    <div class="ts-display-pf-img">
        <a class="image" href="images/content/pf/pf1.jpg" data-rel="prettyPhoto[mixed]"><span
            class="rollover"></span>
            <img src="resources/images/website1.jpg" alt="" /></a>
        </span>
    </div>
</body>
</html>
